{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}Slider | jQuery Ui{% endblock %}

{% block layoutstyle %}
    <link href="{{ asset('bundles/applicationbootstrap/css/examples/navbar_fixed_sticky_footer.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block stylesheets %}
	<link href="{{ asset('//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css') }}" rel="stylesheet" type="text/css" media="all" />
	<link href="{{ asset('bundles/applicationbootstrap/css/sliders/jquery-ui/sliders.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}
	<script src="{{ asset('//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js') }}" type="text/javascript"></script>
	<script type="text/javascript">
		//
		// Function for create test sliders on Progressbar page
		//
		function CreateAllSliders(){
			$(".slider-default").slider();
			var slider_range_min = $(".slider-range-min");
			var slider_range_min_amount = $(".slider-range-min-amount");
			var slider_range_min2 = $(".slider-range-min2");
			var slider_range_min_amount2 = $(".slider-range-min-amount2");
			var slider_range_max = $(".slider-range-max");
			var slider_range_max_amount = $(".slider-range-max-amount");
			var slider_range = $(".slider-range");
			var slider_range_amount = $(".slider-range-amount");
			var slider_range2 = $(".slider-range2");
			var slider_range_amount2 = $(".slider-range-amount2");
			slider_range_min.slider({
				range: "min",
				value: 37,
				min: 1,
				max: 700,
				slide: function( event, ui ) {
					slider_range_min_amount.val( "$" + ui.value );
				}
			});
			slider_range_min_amount.val("$" + slider_range_min.slider( "value" ));
			slider_range_min2.slider({
				range: "min",
				value: 200,
				min: 1,
				max: 700,
				slide: function( event, ui ) {
					slider_range_min_amount2.val( "$" + ui.value );
				}
			});
			slider_range_min_amount2.val("$" + slider_range_min2.slider( "value" ));
			slider_range_max.slider({
				range: "max",
				min: 1,
				max: 100,
				value: 2,
				slide: function( event, ui ) {
					slider_range_max_amount.val( ui.value );
				}
			});
			slider_range_max_amount.val(slider_range_max.slider( "value" ));
			slider_range.slider({
				range: true,
				min: 0,
				max: 500,
				values: [ 75, 300 ],
				slide: function( event, ui ) {
					slider_range_amount.val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
				}
			});
			slider_range_amount.val( "$" + slider_range.slider( "values", 0 ) + " - $" + slider_range.slider( "values", 1 ) );
			slider_range2.slider({
				range: true,
				min: 0,
				max: 500,
				values: [ 0, 400 ],
				slide: function( event, ui ) {
					slider_range_amount2.val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
				}
			});
			slider_range_amount2.val( "$" + slider_range2.slider( "values", 0 ) + " - $" + slider_range2.slider( "values", 1 ) );
			$( ".equalizer > div.progress > div" ).each(function() {
				// read initial values from markup and remove that
				var value = parseInt( $( this ).text(), 10 );
				$( this ).empty().slider({
					value: value,
					range: "min",
					animate: true,
					orientation: "vertical"
				});
			});
		}
	</script>
    <script type="text/javascript">
		$(document).ready(function() {
			// Make all sliders on page
			CreateAllSliders();
		});
	</script>
	
{% endblock %}

{% block navigation %}
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
        
        </div>
    </nav>
{% endblock %}

{% block body %}
    <div class="container">
        <div class="page-header">
          <h1>Slider jQuery Ui</h1>
        </div>
        <div class="row">
        	<div class="col-lg-12">
        		<h2>Progress bars</h2>
        		<div class="progress">
				  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
				    60%
				  </div>
				</div>
        	
				<div class="progress">
				  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
				    <span class="sr-only">40% Complete (success)</span>
				  </div>
				</div>
				<div class="progress">
				  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
				    <span class="sr-only">20% Complete</span>
				  </div>
				</div>
				<div class="progress">
				  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
				    <span class="sr-only">60% Complete (warning)</span>
				  </div>
				</div>
				<div class="progress">
				  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
				    <span class="sr-only">80% Complete</span>
				  </div>
				</div>
        	</div>
        </div>
        
        
        <div class="row">
        	<div class="col-lg-6">
        		<h2>Sliders Horizontal</h2>
        		<p>Minimum <input type="text" class="slider-range-min-amount" /></p>
				<div class="progress">
					<div class="progress-bar slider-range-min" style="width: 100%;"></div>
				</div>
				<p>Minimum <input type="text" class="slider-range-min-amount2" /></p>
				<div class="progress">
					<div class="progress-bar progress-bar-success slider-range-min2" style="width: 100%;"></div>
				</div>
				<p>Maximum <input type="text" class="slider-range-max-amount" /></p>
				<div class="progress">
					<div class="progress-bar progress-bar-info slider-range-max" style="width: 100%;"></div>
				</div>
				<p>Range <input type="text" class="slider-range-amount" /></p>
				<div class="progress">
					<div class="progress-bar progress-bar-warning slider-range" style="width: 100%;"></div>
				</div>
				<p>Range <input type="text" class="slider-range-amount2" /></p>
				<div class="progress">
					<div class="progress-bar progress-bar-danger slider-range2" style="width: 100%;"></div>
				</div>
        		<h2>Sliders Horizontal</h2>
        		<p>Minimum <input type="text" class="slider-range-min-amount" /></p>
				<div class="progress progress-ui">
					<div class="progress-bar slider-range-min" style="width: 100%;"></div>
				</div>
				<p>Minimum <input type="text" class="slider-range-min-amount2" /></p>
				<div class="progress progress-ui">
					<div class="progress-bar progress-bar-success slider-range-min2" style="width: 100%;"></div>
				</div>
				<p>Maximum <input type="text" class="slider-range-max-amount" /></p>
				<div class="progress progress-ui">
					<div class="progress-bar progress-bar-info slider-range-max" style="width: 100%;"></div>
				</div>
				<p>Range <input type="text" class="slider-range-amount" /></p>
				<div class="progress progress-ui">
					<div class="progress-bar progress-bar-warning slider-range" style="width: 100%;"></div>
				</div>
				<p>Range <input type="text" class="slider-range-amount2" /></p>
				<div class="progress progress-ui">
					<div class="progress-bar progress-bar-danger slider-range2" style="width: 100%;"></div>
				</div>
        	</div>
        	<div class="col-lg-6">
        		<h2>Sliders Vertical</h2>
        		
				<div class="equalizer">
					<div class="progress">
						<div class="progress-bar progress-bar-warning">23</div>
					</div>
					<div class="progress">
						<div class="progress-bar progress-bar-danger">44</div>
					</div>
					<div class="progress">
						<div class="progress-bar progress-bar-success">23</div>
					</div>
					<div class="progress">
						<div class="progress-bar progress-bar-info">23</div>
					</div>
					<div class="progress">
						<div class="progress-bar progress-bar-default">66</div>
					</div>
					<div class="progress">
						<div class="progress-bar progress-bar-primary">54</div>
					</div>
					<div class="progress">
						<div class="progress-bar progress-bar-danger">67</div>
					</div>
					<div class="progress">
						<div class="progress-bar progress-bar-success">85</div>
					</div>
					<div class="progress">
						<div class="progress-bar progress-bar-info">70</div>
					</div>
				</div>
				
				<hr/>
				
			    <div class="equalizer">
					<div class="progress">
						<div class="progress-bar progress-bar-warning">23</div>
					</div>
					<div class="progress">
						<div class="progress-bar progress-bar-danger">44</div>
					</div>
					<div class="progress">
						<div class="progress-bar progress-bar-success">23</div>
					</div>
					<div class="progress">
						<div class="progress-bar progress-bar-info">23</div>
					</div>
					<div class="progress">
						<div class="progress-bar progress-bar-default">66</div>
					</div>
					<div class="progress">
						<div class="progress-bar progress-bar-primary">54</div>
					</div>
					<div class="progress">
						<div class="progress-bar progress-bar-danger">67</div>
					</div>
					<div class="progress">
						<div class="progress-bar progress-bar-success">85</div>
					</div>
					<div class="progress">
						<div class="progress-bar progress-bar-info">70</div>
					</div>
				</div>
			
        	</div>
        </div>
    </div> <!-- /container -->
    

{% endblock %}